<template>
  <div class="top-bar">
    <div class="wrap top-bar-wrap">
      <div class="l">欢迎来到书青积分商城</div>
      <div class="r">
        <ul>
          <li @click="toShowToast">
            <img
              class="avatar"
              width="26"
              :src="userInfo.headImg"
              alt="">
            用户名：{{userInfo.nickName}}
          </li>
          <li>我的积分：{{userInfo.coin}}</li>
          <li>获取积分</li>
          <li>书青官网</li>
          <li class="login-btn" v-show="!isLogined" @click="toLogin">登录</li>
          <li class="cart-btn" v-show="isLogined">
            <img src="../assets/img/cart.png" alt="" />
            <span>购物车</span>
            <b>{{ cartTotal }}</b>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from "vuex";
import { WeixinLoginAPI } from "@/request/api";
export default {
  data() {
    return {
      // 购物车总数量
      //cartTotal: 0,
    };
  },
  watch: {
    "$route.path": {
      handler(newVal,oldVal){
      let mytoken = localStorage.getItem("x-auth-token");
      this.chanIsLogined(Boolean(mytoken))
        if(mytoken){
          this.asyncChanUserInfo()
        }else{
          //没有登录的情况，把用户数据初始化
          this.initUserInfo()
    }
   }
    }
  },
  created() {
    setTimeout(async()=>{
        let mycode = this.$route.query.code;
      if (mycode) {
        //发起微信扫码登录请求
        let res = await WeixinLoginAPI({
          code: mycode,
        });
        console.log(res);
        if (res.code == 0) {
          // 分析登录成功之后的逻辑
        // 1 提示用户登录成功
        this.asyncChanIsShowToast({
          msg: "登录成功!",
          type: "success",
        });
        // 2 关闭登录窗口
       this.chanIsShowLoginModal(false)
        // 3 保存token值到localStorage中
        localStorage.setItem("x-auth-token", res["x-auth-token"]);
        // 4 登录状态的切换 (隐藏登录按钮展示购物车按钮, 用户名昵称头像)
        this.chanIsLogined(true);
        this.$router.push(this.$route.path)
        this.asyncChanUserInfo()
      
        } else if (res.code == 400) {
          //code失效的情况
          //1.提示用户重新扫二维码
          this.asyncChanIsShowToast({
            msg: "code失效,请重新扫码登录!",
            type: "warning",
          });
          this.chanIsShowLoginModal(true);
        } else if (res.code == 407) {
          this.asyncChanIsShowToast({
          msg: "请使用手机号码绑定微信",
          type: "warning",
        });
        this.chanIsShowLoginModal(true);
        localStorage.setItem("uuid",res.uuid)
        }
      }else{
        //没有code是什么情况
        //1 用户没有扫码登录 2或者用户已经登录了
        let mytoken = localStorage.getItem("x-auth-token");
        this.chanIsLogined(Boolean(mytoken))
        if(mytoken){
          this.asyncChanUserInfo()
        }else{
          //没有登录的情况，把用户数据初始化
          this.initUserInfo()
        }
      }
    },100)
  },
  computed: {
    ...mapState({
      isLogined: (state) => state.loginStatus.isLogined,
      cartTotal:state=>state.userInfo.cartTotal,
      userInfo:state=>state.userInfo.userInfo,
    }),
  },
  methods: {
    ...mapMutations({
      chanIsShowLoginModal: "showLoginModal/chanIsShowLoginModal",
      chanIsShowToast: "showToast/chanIsShowToast",
      chanIsLogined: "loginStatus/chanIsLogined",
      initUserInfo:"userInfo/initUserInfo"
    }),
    ...mapActions({
      asyncChanIsShowToast: "showToast/asyncChanIsShowToast",
      asyncChanUserInfo: "userInfo/asyncChanUserInfo"
    }),
    toLogin() {
      // 展示登录模态窗口,本质上修改Vuex中的 isShowLoginModal的值变成true
      this.chanIsShowLoginModal(true);
    },
    toShowToast() {
      // 显示与否  true 仅仅之决定了一个显示属性
      // 提示文本  "登录成功"
      // 提示类型  "sucess"   "wraning"  "danger"
      // 展示提示框
      if (this.isLogined) {
        this.asyncChanIsShowToast({
          msg: "登录成功!!!",
          type: "success",
        });
      } else {
        this.asyncChanIsShowToast({
          msg: "请登录",
          type: "warning",
        });
      }
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/css/global.less";
.top-bar {
  height: 40px;
  background: #b7a1eb;
  color: #fffefe;
  line-height: 40px;
  .top-bar-wrap {
    /* background-color: pink; */
    height: 40px;
    display: flex;
    justify-content: space-between;
    /*字体样式 */
    font-size: 14px;
    font-family: SourceHanSansSC;
    font-weight: 300;
    color: #fffefe;
    .r {
      ul {
        display: flex;
        li {
          cursor: pointer;
          display: flex;
          align-items: center;
          margin-left: 20px;
          .avatar {
            border-radius: 50%;
            margin-right: 6px;
          }

          &.login-btn {
            width: 124px;
            height: 40px;
            background: @base-color;
            justify-content: center;
          }
        }
      }
    }
  }
}

.cart-btn {
  width: 124px;
  height: 40px;
  background: @base-color;
  justify-content: center;
  img {
    margin-right: 6px;
  }
  b {
    width: 22px;
    height: 22px;
    line-height: 22px;
    margin-left: 6px;
    background-color: #f40;
    text-align: center;
    border-radius: 50%;
  }
}
</style>